<template>
  <div id="liveRoomDetails">
    <table class="table">
      <tbody>
        <tr>
          <td></td>
          <td v-for="(item, index) in detailsList" :key="'c' + index">
            <div class="cinfoBox">
              <div class="logoBox">
                <img :src="item.logo" class="logoImg" @click="go_to_page01(item.authorid)" />
                <div v-if="item.is_delete == 2" class="delete">已封号</div>
                <div class="delete" v-if="item.is_delete == 3">
                        已注销
                      </div>
              </div>

              <div class="cinfoRight">
                <div class="right01">
                  <span @click="go_to_page01(item.authorid)">
                    {{ item.nickname
                    }}
                    <img
                      src="../../../../assets/wang/talentCompare/rzBlue.png"
                      v-if="item.verify_type == 2"
                    />
                    <img
                      src="../../../../assets/wang/talentCompare/rzOrange.png"
                      v-if="item.verify_type == 1"
                    />
                    <img
                      src="../../../../assets/wang/talentCompare/shop.png"
                      v-if="item.is_shop == 1"
                    />
                  </span>
                </div>
                <div class="right02">
                  <span>抖音号:</span>
                  <span>{{ item.uniqueid }}</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <!-- 基础信息 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>基础信息</span>
            </div>
          </td>
        </tr>

        <tr>
          <td class="title">粉丝总数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.total_fans) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">直播信息</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <img :src="item.room_logo" alt @click="go_to_page02(item.roomid)" class="live_room" />
            <div>
              <span class="hot_word" @click="go_to_page02(item.roomid)">{{ item.room_title }}</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">开播时间</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ timestamp(item.begin_time_stamp, "Y/M/D h:m") }}</span>
          </td>
        </tr>
        <!-- 直播数据" -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>直播数据</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">直播时长</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>
              {{
              format_time(
              item.end_time_stamp * 1000 - item.begin_time_stamp * 1000
              )
              }}
            </span>
          </td>
        </tr>
        <tr>
          <td class="title">累计观看人次</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_view_count) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">人数峰值</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_people_peak) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">直播销量</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_volume) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">销售额</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_sales) }}</span>
          </td>
        </tr>

        <!-- 商品数据 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>商品数据</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">商品类目</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ item.live_pro_category }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">销售额top1</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <div style="    display: flex;
    justify-content: center;">
              <span class="live_sales">{{ item.live_sales_top1 }}</span>
            </div>
          </td>
        </tr>

        <tr>
          <td class="title">直播商品数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_pro_count) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">客单价</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_price_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">UV价值</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ format_num(item.live_uv) }}</span>
          </td>
        </tr>
        <!-- 人气数据 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>人气数据</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">新增粉丝</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ format_num(item.live_fans_incr) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">转粉率</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ item.live_fans_rate }} %</span>
          </td>
        </tr>
        <tr>
          <td class="title">平均在线人数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ format_num(item.live_online_avg) }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">人均看播时长</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ item.live_view_avg }}</span>
          </td>
        </tr>
        <!-- <tr>
          <td class="title">获得音浪</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">
              {{ format_num(item.live_sound) }}
            </span>
          </td>
        </tr>-->
        <tr>
          <td class="title">点赞数</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span class="pro_category">{{ format_num(item.live_favorite) }}</span>
          </td>
        </tr>
        <!-- 观众数据 -->
        <tr>
          <td :colspan="detailsList.length + 1" class="titleBox_title">
            <div class="titleBox_box"></div>
            <div class="titleBox">
              <span>观众数据</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">观众性别</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.live_fans_max_male }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">观众年龄</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.live_fans_max_age }}</span>
          </td>
        </tr>
        <tr>
          <td class="title">直播观众来源</td>
          <td v-for="(item, index) in detailsList" :key="'c1' + index">
            <span>{{ item.live_fans_max_from }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    inputName: String,
  },
  data() {
    return {
      id: 0,
      detailsList: [],
    }
  },
  computed: {},
  created() {
    this.id = this.inputName

    this.getDetailsData()
  },
  mounted() {},
  watch: {},
  methods: {
    getDetailsData() {
      let that = this
      this.$axios
        .get('/api/live/GetLiveCompareDetailById', {
          params: {
            secid: this.id,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.detailsList = res.data.data
          }
        })
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`,
      })
      window.open(router.href, '_blank')
    },
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`,
      })
      window.open(router.href, '_blank')
    },
  },
  components: {},
}
</script>

<style scoped lang="less">
#liveRoomDetails {
  padding: 30px;
  table {
    width: 100%;
    tr {
      td:nth-of-type(1) {
        text-align: left;
        width: 105px;
      }
      td {
        text-align: center;
        font-size: 14px;
        color: #222;
      }
    }
    tr:nth-of-type(1) {
      border-bottom: 1px solid #efefef;
    }

    .cinfoBox {
      height: 114px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      flex-direction: column;
      align-items: center;
      .logoBox {
        position: relative;
        width: 50px;
        height: 50px;

        .logoImg {
          cursor: pointer;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 1px solid #e5e5e5;
          display: block;
          margin: 0 auto;
          border: 1px solid #e5e5e5;
        }

        .delete {
          width: 50px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #f5f5f5;
          border-radius: 12px;
          border: solid 1px #e5e5e5;
          font-size: 12px;
          color: #222222;
          position: absolute;
          left: 50%;
          bottom: -2px;
          transform: translate(-50%, 0);
        }
      }
    }
    .cinfoRight {
      // flex: 1;
      margin-left: 12px;
      .right01 {
        text-align: center;
        margin-top: 10px;
        span {
          cursor: pointer;
          display: inline-block;
          width: 100px;
          font-size: 14px;
          color: #222222;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:hover {
          color: #ff924b;
        }
        img {
          width: 16px;
          height: 16px;
          margin-right: 7px;
        }
        img:nth-of-type(1) {
          margin-left: 5px;
        }
      }
      .right02 {
        margin-top: 6px;
        text-align: center;
        span {
          font-size: 12px;
          color: #888888;
        }
      }
    }

    tr:nth-of-type(3),
    tr:nth-of-type(4),
    tr:nth-of-type(5),
    tr:nth-of-type(7),
    tr:nth-of-type(8),
    tr:nth-of-type(9),
    tr:nth-of-type(10),
    tr:nth-of-type(11),
    tr:nth-of-type(13),
    tr:nth-of-type(14),
    tr:nth-of-type(15),
    tr:nth-of-type(16),
    tr:nth-of-type(17),
    tr:nth-of-type(19),
    tr:nth-of-type(20),
    tr:nth-of-type(21),
    tr:nth-of-type(22),
    tr:nth-of-type(23),
    tr:nth-of-type(25),
    tr:nth-of-type(26),
    tr:nth-of-type(27),
    tr:nth-of-type(28) {
      height: 54px;
      border-bottom: 1px solid #efefef;
      td:nth-child(1) {
        padding-left: 10px;
      }
      img {
        width: 16px;
        height: 16px;
      }
    }
    tr:nth-of-type(4) {
      height: 124px;
      div {
        text-align: center;
        display: flex;
        justify-content: center;
        span {
          text-align: center;
          width: 150px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          margin-top: 10px;
        }
      }
      img {
        width: 50px;
        height: 50px;
        background-color: #ff7600;
        border-radius: 6px;
      }
    }
    tr:nth-of-type(2),
    tr:nth-of-type(6),
    tr:nth-of-type(12),
    tr:nth-of-type(18),
    tr:nth-of-type(24):hover {
      border-bottom: none;
      background: #ffffff;
    }
    tr:nth-of-type(12),
    tr:nth-of-type(18),
    tr:nth-of-type(24) {
      border-bottom: none;
    }
  }
  .title {
    font-size: 14px;
    color: #888888;
  }
  .titleBox_title {
    display: flex;

    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    .titleBox {
      -webkit-box-align: center;

      span {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
      }
    }

    .titleBox_box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
      margin-top: 1px;
    }
  }
  .onOpen {
    color: #888888;
  }
  .fansG {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 26px;
  }
  .live_room {
    cursor: pointer;
  }
  .hot_word {
    display: inline-block;
    width: 150px;
    cursor: pointer;
  }
  .hot_word:hover {
    color: #ff924b;
  }
  .pro_category {
    display: inline-block;
    width: 140px;
  }
  .live_sales {
    display: inline-block;
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
}
</style>
